<template>
  <div>
    <Card ref="card">
      <p slot="title">错误日志</p>
      <a href="#" slot="extra" @click.prevent="GetErrorLog()">刷新</a>
      <Button @click="exportData" type="primary" style="margin: 0 10px 10px 0;">导出错误日志记录</Button>
      <Button @click="DeleteErrorLog" type="primary" style="margin: 0 10px 10px 0;">清空错误日志记录</Button>
    </Card>

    <Table class="margin-top-10" :height="tableHeight" border ref="table" :columns="columns" :data="errorList"></Table>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { GetErrorLog, DeleteErrorLog } from "@/api/data";
import { mapMutations } from "vuex";
export default {
  name: "error_logger_page",
  data() {
    return {
      tableHeight: 450,
      columns: [
        {
          type: "index",
          title: "序号",
          width: 100
        },
        {
          key: "Timestamp",
          title: "时间",
          width: 200,
          render: (h, { row }) => {
            return (
              <span>{dayjs(row.Timestamp).format("YYYY-MM-DD HH:mm:ss")}</span>
            );
          }
        },
        {
          key: "type",
          title: "类型",
          width: 100,
          render: (h, { row }) => {
            return (
              <div>
                <icon
                  size={16}
                  type={row.type === "ajax" ? "md-link" : "md-code-working"}
                />
              </div>
            );
          }
        },
        {
          key: "code",
          title: "编码",
          render: (h, { row }) => {
            return <span>{row.code === 0 ? "-" : row.code}</span>;
          }
        },
        {
          key: "mes",
          title: "信息"
        },
        {
          key: "url",
          title: "URL"
        }
      ],
      errorList: []
    };
  },
  computed: {},
  methods: {
    ...mapMutations(["setHasReadErrorLoggerStatus"]),
    GetErrorLog() {
      let vm = this;
      GetErrorLog().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.errorList = data.Data;
        } else {
          this.$Message.error(data.Message);
        }
      });
    },
    DeleteErrorLog() {
      let vm = this;
      this.$Modal.confirm({
        title: "提示",
        content: "确定要清空错误日志记录吗？",
        onOk: () => {
          DeleteErrorLog().then(res => {
            this.GetErrorLog();
          });
        },
        onCancel: () => {}
      });
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: "错误日志.csv"
      });
    }
  },
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight-160 ;
    this.GetErrorLog();
  }
};
</script>

<style>
</style>
